@import "common";

/* CSS Document */

* {
    margin: 0;
    padding: 0;
}

ul,
li {
    list-style: none;
}

body {
    background: #f8f8f8;
    color: #333;
}

img {
    width: 100%;
    display: block;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.fn-clear:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}

.fn-clear {
    zoom: 1
}

input {
    outline: none;
    -webkit-appearance: none
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.flex {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex-1 {
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
    /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
}

.width5 {
    width: 20%
}

$indexiconurl:url("../images/net_ico.png") no-repeat center;
.mui-icon {
    display: block;
    background: $indexiconurl;
    margin: 0 auto;
    -webkit-background-size: 111px 249px;
    background-size: 111px 249px;
}

.mui-bar {
    background: #fff;
}

.mui-bar-tab .mui-tab-item.mui-active {
    color: #c2561e!important;
}

.yoke-icon-home {
    background-position: 0px -192px;
}

.yoke-icon-class {
    background-position: -43px -192px;
}

.yoke-icon-cart {
    background-position: -1px -220px;
}

.yoke-icon-mem {
    background-position: -40px -220px;
}

.search_top {
    width: 100%;
    height: 2.25rem;
    width: 100%;
    background: #c7c7c7;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.search_top .search_a {
    font-size: 0.55rem;
    line-height: 1.35rem;
    color: #999;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    display: block;
    width: 16.5rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 0.65rem;
}

.search_top .yk_logo {
    width: 1.15rem;
    padding-left: 0.85rem;
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box
}

.search_top .search_ico {
    width: 0.675rem;
    padding-left: 0.5rem;
    padding-right: 0.35rem;
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box
}

.topheight {
    height: 2.25rem;
}

.swipe-index {
    height: 5.75rem;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    padding: 6px;
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell img {
    width: 2.5rem;
    height: 2.1rem;
    margin: 0 auto;
}

.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
    font-size: 10px;
}

.wx_recommend {
    width: 100%;
    margin-top: .25rem;
    padding-bottom: .425rem;
    background: #f34f51 url(../images/yktjz_bg.png) center no-repeat;
    background-size: 100% 100%;
}

.wx_recommend .wx_recom_top {
    height: 1.75rem;
    line-height: 2rem;
    background: url(../images/news_ico.png) 1.57rem 0.325rem no-repeat;
    background-size: 1.35rem 1.6rem;
}

.wx_recommend .wx_recom_top .wx_recom_ico {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    display: inline-block;
    padding-left: 3.5rem;
}

.wx_recommend .wx_recom_top .recomm_tit {
    width: 4rem;
    display: inline-block;
}

.wx_recommend .wx_recom_con {
    width: 18.25rem;
    margin: 0 auto;
    box-sizing: border-box;
    background: #fff;
    border-radius: .25rem;
    display: flex;
    padding: .55rem .6rem 0 .6rem;
}

.wx_recommend .wx_recom_con .wx_recom_left {
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
    /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
    position: relative;
}

.wx_recommend .wx_recom_con .wx_recom_left h3 {
    font-size: .65rem;
    color: #333;
    line-height: .85rem;
}

.wx_recommend .wx_recom_con .wx_recom_left em {
    color: #e32b2b;
    font-size: .75rem;
    line-height: 1.25rem;
    display: block;
    font-style: normal;
}

.wx_recommend .wx_recom_con .wx_recom_left:before {
    border-right: 1px solid #cbcbcb;
    color: #e5e5e5;
    content: " ";
    height: 9.7rem;
    position: absolute;
    right: 0;
    top: 0;
}

.wx_recommend .wx_recom_con .wx_recom_left img {
    width: 7.5rem;
    height: 7.5rem;
    display: inline-block;
    margin: 0 auto;
}

.wx_recom_right {
    -webkit-box-flex: 1;
    /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;
    /* OLD - Firefox 19- */
    /* For old syntax, otherwise collapses. */
    -webkit-flex: 1;
    /* Chrome */
    -ms-flex: 1;
    /* IE 10 */
    flex: 1;
}

.wx_recom_right ul {
    padding: 0 0 0 .5rem;
}

.wx_recom_right ul li {
    position: relative;
    padding-top: .5rem;
}

.wx_recom_right ul li:first-child {
    padding-top: 0!important;
}

.wx_recom_right ul li .wx_recom_pro_tit {
    float: left;
    width: 5.5rem;
}

.wx_recom_right ul li .wx_recom_pro_tit h3 {
    width: 4.275rem;
    font-size: .55rem;
    color: #666;
    line-height: 1rem;
    max-height: 1rem;
    overflow: hidden;
}

.wx_recom_right ul li .wx_recom_pro_tit em {
    font-size: 0.6rem;
    color: #e32b2b;
    line-height: 1;
    display: block;
    font-style: normal;
    padding: .75rem 0 .75rem 0;
}

.wx_recom_right ul li img {
    float: right;
    width: 2.5rem;
    height: 2.5rem;
}

.wx_recom_right ul li:before {
    border-bottom: 1px solid #cbcbcb;
    color: #e5e5e5;
    content: " ";
    width: 100%;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.wx_recom_right ul li:last-child:before {
    border-bottom: 0px solid #cbcbcb;
    color: #e5e5e5;
    content: " ";
    width: 100%;
    height: 1px;
    position: absolute;
    right: 0;
    bottom: 0;
}

.wx_hot_ranking_list {
    width: 100%;
    height: 6.85rem;
}

.product_zq {
    margin-bottom: .25rem
}

.wx-hot-com {
    padding-bottom: 50px;
}

.wx_hot_list {
    padding: .375rem .15rem;
    background: #f0eff5;
}

.wx_hot_list ul li {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: .4rem;
}

.wx_hot_list ul li .pro-img {
    width: 8.875rem;
    height: 8.875rem;
    margin: 0 auto;
}

.pro-img {
    position: relative;
}

.discount-box {
    position: absolute;
    left: .3rem;
    top: .2rem;
    width: 3rem;
    height: 3rem;
    text-align: center;
    background: url(../images/discountbg.png) center;
    background-size: 100% 100%;
    padding-top: .7rem;
    box-sizing: border-box
}

.discount-box span {
    font-weight: 700;
    color: #fff;
    display: block;
}

.discout-label {
    font-size: .6rem;
}

.discout-price {
    font-size: .7rem;
}

.fullcut-box {
    position: absolute;
    left: .3rem;
    top: .2rem;
    width: 1.5rem;
    height: 1.5rem;
    text-align: center;
    background: url(../images/fullcut-icon.png) center;
    background-size: 100% 100%;
    padding-top: .7rem;
    box-sizing: border-box
}

.wx_hot_list ul li .pro-tit {
    width: 8.875rem;
    margin: 0 auto;
    box-sizing: border-box;
    padding: .5rem;
    background: #fff;
}

.wx_hot_list ul li .pro-tit .tit {
    font-size: .75rem;
    color: #3a3a3a;
    line-height: 1.4;
    height: 2rem;
    overflow: hidden;
}

.pro-price {
    padding-top: .45rem;
}

.price_bottom {
    font-size: .75rem;
    color: #999;
}

.price_bottom span {
    display: block;
}

.price_top {
    font-size: .75rem;
    color: #f33;
}


/*分类*/

.main-header {
    position: relative;
}

.classify-header-fix {
    border-bottom: 1px solid #ccc;
}

.header-fix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 98;
    width: 18.75rem;
    overflow: hidden;
    background: #fff;
}

.header-search {
    display: block;
    width: 18rem;
    height: 2rem;
    margin: .35rem auto;
    border-radius: .15rem;
    background-color: #f2f2f2;
}

.header-search i {
    display: inline-block;
    width: 1.375rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    font-size: .75rem;
}

.header-search span {
    font-size: .3rem;
    color: gray;
}

#categorybox {
    background: #fff;
}

.section-firstCate {
    position: fixed;
    left: 0;
    top: 2.225rem;
    bottom: 2.475rem;
    z-index: 2;
    box-sizing: border-box;
    width: 4.525rem;
    overflow: hidden;
}

.section-firstCate>div {
    height: 100%;
}

.section-firstCate ul {
    width: 4.5rem;
}

.section-firstCate li.firstCate-active {
    color: #7f4395;
    border-left: .1rem solid #7f4395;
}

.section-firstCate li {
    width: 4.4rem;
    height: 2.2rem;
    line-height: 2.2rem;
    border-left: .1rem solid transparent;
    font-size: .75rem;
    color: #333;
    text-align: center;
}

.escp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-cateList {
    position: fixed;
    left: 0;
    top: 2.25rem;
    z-index: 2;
    box-sizing: border-box;
    width: 14.225rem;
    bottom: 2.25rem;
    left: 4.525rem;
}

.section-cateList>div {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

.cateList-first {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}

.cateList-first>a {
    display: block;
}

.cateList-first>a img {
    width: 13.225rem;
    height: 6rem;
    margin: .5rem .5rem 0;
    background: url(https://static.biyao.com/m/img/master/base/depic.png?v=biyao_00fa500) no-repeat center;
}

.cateList-third {
    float: left;
    width: 33.333%;
    margin-top: 1rem;
}

.cateList-third img {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .075rem;
    background: url(https://static.biyao.com/m/img/master/base/depic.png?v=biyao_00fa500) no-repeat center;
}

.cateList-third dl {
    text-align: center;
}

.cateList-third dd {
    margin-top: .5rem;
    color: #333;
    font-size: .6rem;
    word-break: break-all;
}

.cateList-second .list-hd {
    height: 2rem;
    position: relative;
    line-height: 2rem;
    text-align: center;
    font-size: .6rem;
    color: #333;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cateList-second .list-hd:before {
    content: "";
    position: absolute;
    height: .06667rem;
    top: 50%;
    margin-top: -.0133335rem;
    margin-left: -1.806667rem;
    width: 1.6rem;
    background: #ccc;
}

.cateList-second .list-hd:after {
    content: "";
    position: absolute;
    height: .06667rem;
    top: 50%;
    margin-top: -.0133335rem;
    margin-left: .266667rem;
    width: 1.6rem;
    background: #ccc;
}

.pro-swipe {
    height: 18.75rem;
}

.bottom-pay {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 2.5rem;
    width: 100%;
    background: #f7f7fa;
    font-size: .7rem
}

.bottom-pay .left {
    width: 40%;
}

.bottom-pay .left div {
    width: 50%;
    text-align: center;
    height: 2.5rem;
    line-height: 1rem
}

.add-cart {
    background: #f19325;
    border-right: 1px solid #f19325;
    box-sizing: border-box;
}

.buy-btn {
    background: #fb1616;
}

.bottom-pay .right {
    width: 60%;
    color: #fff;
}

.bottom-pay .right div {
    width: 50%;
    text-align: center;
    height: 2.5rem;
    line-height: 2.5rem
}

.bottom-pay .left i {
    display: block;
    width: 25px;
    height: 25px;
    margin: .25rem auto 0;
    background: url(../images/net_ico.png) no-repeat;
    background-size: 111px 249px;
}

.bottom-pay .cart-icon i {
    background-position: -84px -84px;
}

.bottom-pay .collect-icon i {
    background-position: -84px -54px;
}

.sku-box {
    width: 100%
}

.sku-tt {
    position: relative;
    padding: .25rem 0 .5rem 0;
    border-bottom: 1px solid #e5e5e5;
}

.pro-sku-img {
    margin: -2rem .75rem 0 1.12rem;
    flex: 0 0 5.25rem;
    width: 5.25rem;
    height: 5.25rem;
}

.pro-sku-img img {
    border-radius: .25rem;
    border: 1px solid #E5E5E5;
}

.pro-sku-tit {
    flex: 0 0 1;
}

.pro-sku-tit .tit {
    font-size: .75rem;
    color: #333;
    padding-right: 1rem;
}

.pro-sku-tit .price {
    color: #e32b2b;
    font-size: .7rem;
    padding-top: .55rem;
}

.sku-list {
    padding: .7rem 1.12rem .7rem;
    height: 10rem;
    overflow: scroll;
}

.sku-list .sku-name {
    font-size: .75rem;
    color: #333;
    margin: .35rem 0;
}

.sku-list .sku-attrs span {
    display: inline-block;
    font-size: .6rem;
    background: #e5e5e5;
    padding: .15rem .55rem;
    border-radius: .25rem;
    margin: .35rem .35rem;
}

.sku-list .sku-attrs .on {
    background: #e43a3d;
    color: #fff
}

.pro-amount-con {
    display: flex;
    font-size: .8rem;
    padding: .5rem .5rem 1.12rem 1.12rem;
    border-top: 1px solid #e5e5e5;
}

.pro-amount-con label {
    flex: 1
}

.pro-amount-con .pro_amount {
    flex: 0 0 5rem;
}

.amount {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 5rem;
    text-align: center;
}

.amount span {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    display: inline-flex;
    height: 22px;
    line-height: .5rem;
    margin: 0 .2rem;
    font-size: .8rem;
}

.amount span i {
    background: url(../images/net_ico.png) no-repeat;
    background-size: 111px 249px;
}

.amount span.decrease i {
    width: 22px;
    height: 22px;
    background-position: -19px -46px;
}

.amount span.increase i {
    width: 22px;
    height: 22px;
    background-position: -40px -46px;
}

.amount span i.disable {}

.amount input {
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
    height: 22px;
    text-align: center;
    border: none;
    font-size: .8rem;
    margin: 0;
    padding: 0
}

.sku-submit {
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    background: #e43a3d;
    color: #fff;
    font-size: .9rem;
}

.mint-toast {
    z-index: 99999
}

//购物车
.cart-container {
    background: #fff;
    font-size: .75rem;
    padding-bottom: 2.5rem;
}

.check-box {
    flex: 1
}

.cart-container input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    outline: none;
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/nocheck-icon.png) center no-repeat;
    background-size: 100% 100%;
}

.cart-hd {
    height: 2.5rem;
    border-bottom: .15rem solid #e5e5e5;
    padding: 0 .75rem;
}

.cart-container input:checked {
    background: url(../images/redcheck-icon.png) center no-repeat;
    background-size: 100% 100%;
}

.delete-btn {
    width: 1rem;
    height: 1rem;
    background: url(../images/delete_ico.png) no-repeat;
    background-size: 100% 100%;
    display: block;
}

.cart-list {
    padding: 0 .75rem;
}

.cart-li {
    border-bottom: 1px solid #e5e5e5
}

.cart-li img {
    display: inline-block;
    width: 4rem;
    height: 4rem;
    vertical-align: middle;
    margin-left: .35rem;
}

.cart-li .left input {
    vertical-align: text-top;
}

.cart-li .right {
    width: 10rem;
    box-sizing: content-box;
    flex: 1;
    padding: .25rem
}

.pri_num_box .price {
    flex: 1
}

.pri_num_box .num-box {
    color: #999
}

.price {
    color: #fb1616
}

.num-box .pro_amount {
    float: left
}

.num-box .delete-btn {
    float: right
}

.right .tit {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.sku-info {
    padding: 0 0 .25rem 0
}

.sku-info span {
    flex: 1;
    font-size: .65rem;
    color: #999
}

.sku-info i {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background: url(../images/jt.png) center no-repeat;
    background-size: 100% 100%;
}

.cart-bottom {
    line-height: 2.5rem;
}

.cart-bottom .left {
    flex: 1;
    padding-left: .5rem;
}

.cart-bottom .left span {
    font-size: .8rem;
    color: #fb1616
}

.cart-bottom .right {
    height: 2.5rem;
    flex: 0 0 6rem;
    background: #fb1616;
    font-size: .8rem;
    text-align: center
}